<template>
    <div>
        <Alert>新增加的账号初始密码：000000，请登录后及时修改！</Alert>
        <Form inline>
            <FormItem>
                <Input v-model="params.login_name" placeholder="请输入子账号"/>
            </FormItem>
            <FormItem v-if="getUserInfo.id == 1">
                <Checkbox v-model="params.pid" true-value="0" false-value="">查询一级账号</Checkbox>
            </FormItem>
            <FormItem>
                <Button type="success" @click="search">搜索</Button>
            </FormItem>
        </Form>
        <wl-resource-table headerShow @addAction="modalAdd" @editAction="edit" :params="params"
                           ref="wlTable" @showChild="showChildAction" :addTitle="addTitle"></wl-resource-table>
        <wl-resource-form
                :show="modelFormShow"
                :options="filitionOption"
                :filtrationFun="fun"
                @result="formResult"
                @cancelShow="cancelShow">
        </wl-resource-form>
    </div>
</template>

<script>
import WlResourceTable from './wl-resource-table/'
import WlResourceForm from './wl-resource-form/'
import { checkAcount } from '@/api/user'
import { getCountChild } from '@/api/google'

export default {
  components: { WlResourceForm, WlResourceTable },
  data () {
    const checkMobile = (mobile) => {
      let re = /^(17[0-9]|13[0-9]|14[0-9]|15[0-9]|18[0-9]|199|166)\d{8}$/
      let ret = false
      if (re.test(mobile)) {
        ret = true
      }
      return ret
    }
    const validateAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('登录账号必须填写'))
      }
      console.log(checkMobile(value), '---')
      // if (!checkMobile(value)) {
      //  return callback(new Error('请输入正确手机号'))
      // }
      // 模拟异步验证效果
      checkAcount(value).then(ret => {
        if (ret.data.errcode === 1001) {
          callback()
        } else {
          callback(new Error('该账号已经存在'))
        }
      })
    }
    return {
      params: {
        login_name: '',
        pid: ''
      },
      modelFormShow: false,
      fun: (data) => {
        if (this.type === 'add') {
          return data
        } else {
          if (this.getUserInfo.id === 1) {
            return this.$common.xeUtils.pick(data, ['id', 'company_name', 'industry', 'address', 'main_product', 'long_time', 'max_num'])
          } else {
            return this.$common.xeUtils.pick(data, ['id', 'company_name', 'industry', 'address', 'main_product'])
          }
        }
      },
      type: 'add',
      allCount: 0,
      options: {
        // 表单属性 非必需
        formProps: {
          'label-width': 80
        },
        // 表单数据 必需
        formData: {
          id: '',
          login_name: '',
          password: '',
          company_name: '',
          people: '',
          industry: '',
          address: '',
          main_product: '',
          long_time: 1,
          max_num: 1
        },
        // 表单项组件数据 必需
        formItem: [
          {
            type: 'input',
            key: 'login_name',
            label: '账号',
            props: {
              placeholder: '建议用企业邮箱设为账号'
            },
            rules: {
              validator: validateAge, trigger: 'blur'
            }
          },
          {
            type: 'input',
            label: '输入密码',
            key: 'password',
            props: {
              placeholder: ''
            },
            rules: [{
              required: true,
              trigger: 'blur',
              message: '密码必须填写'
            }]
          }, {
            type: 'input',
            label: '公司名称',
            key: 'company_name',
            props: {
              placeholder: ''
            },
            rules: {
              required: true,
              trigger: 'blur',
              message: '请输入公司名称'
            }
          }, {
            type: 'input',
            label: '行业',
            key: 'industry',
            props: {
              placeholder: ''
            }
          }, {
            type: 'input',
            label: '公司地址',
            key: 'address',
            props: {
              placeholder: ''
            }
          }, {
            type: 'input',
            label: '使用人',
            key: 'people',
            props: {
              placeholder: ''
            }
          }, {
            type: 'input',
            label: '主营产品',
            key: 'main_product',
            props: {
              placeholder: ''
            }
          }, {
            type: 'inputNumber',
            label: '有效期/天',
            key: 'long_time',
            props: {
              min: 1
            }
          }, {
            type: 'inputNumber',
            label: '账号数量',
            key: 'max_num',
            props: {
              min: 1
            }
          }
        ]
      }
    }
  },
  computed: {
    filitionOption () {
      if (this.type === 'add') {
        if (this.getUserInfo.id > 1) {
          let nowOption = JSON.parse(JSON.stringify(this.options))
          let data = []
          nowOption.formItem.forEach(item => {
            if (item.key !== 'long_time' && item.key !== 'max_num') {
              data.push(item)
            }
          })
          nowOption.formItem = data
          console.log(nowOption, 'result')
          return nowOption
        } else {
          return this.options
        }
      } else {
        let nowOption = JSON.parse(JSON.stringify(this.options))
        let data = []
        nowOption.formItem.forEach(item => {
          if (item.key !== 'password' && item.key !== 'login_name') {
            if (this.getUserInfo.id > 1) {
              if (item.key !== 'long_time' && item.key !== 'max_num') {
                data.push(item)
              }
            } else {
              data.push(item)
            }
          }
        })
        nowOption.formItem = data
        return nowOption
      }
    },
    getUserInfo () {
      return this.$store.state.user.severUserInfo.data
    },
    addTitle () {
      let num = this.allCount
      if (num > 0) {
        return '新增(可以添加' + num + '个账号)'
      } else {
        return '新增'
      }
    }
  },
  mounted () {
    this.getCount()
  },
  methods: {
    search () {
      this.$refs.wlTable.getList()
    },
    getCount () {
      getCountChild().then(ret => {
        if (ret.data.errcode === 1001) {
          this.allCount = ret.data.max_num
        } else {
          this.allCount = 0
        }
      })
    },
    formResult (data) {
      if (data.errcode === 1001) {
        this.type === 'add' ? this.$Message.success('新增成功！') : this.$Message.success('编辑成功！')
        this.modelFormShow = false
        this.$refs.wlTable.getList()
      } else {
        this.$Message.success(data.errmsg)
      }
      this.getCount()
    },
    edit (row) {
      this.type = 'edit'
      row.long_time = row.how_long_time / 86400
      console.log(row)
      this.options.formData = row
      this.modelFormShow = true
    },
    modalAdd () {
      this.type = 'add'
      let userInfo = this.getUserInfo
      if (userInfo.id > 1) {
        this.options.formData = {
          id: '',
          login_name: '',
          password: '',
          company_name: userInfo.company_name,
          industry: userInfo.industry,
          address: userInfo.address,
          main_product: userInfo.main_product
        }
      } else {
        this.options.formData = {
          id: '',
          login_name: '',
          password: '',
          company_name: '',
          industry: '',
          address: '',
          main_product: ''
        }
      }
      this.modelFormShow = true
    },
    cancelShow () {
      this.modelFormShow = false
    },
    showChildAction (row) {
      this.params.pid = row.id
      this.search()
    }
  }
}
</script>

<style scoped>
    .actionBtn {
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .page {
        text-align: right;
        margin-top: 10px;
    }

    .input {
        width: 280px;
    }

</style>
